<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column label="目录" align="right" width="150">
        <el-table-column prop="qualification" label="资格" width="150">
          <template slot-scope="{row}">
            <span v-if="row.qualification==0">公益会员</span>
            <span v-if="row.qualification==1">公益创客</span>
            <span v-if="row.qualification==2">公益联盟爱心小屋</span>
            <span v-if="row.qualification==3">公益联盟服务驿站</span>
            <span v-if="row.qualification==4">公益联盟服务中心</span>
            <span v-if="row.qualification==5">市级</span>
            <span v-if="row.qualification==6">公益联盟省级公司</span>
            <span v-if="row.qualification==7">公益联盟大区公司</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="name" label="准入条件" align="center">
        <el-table-column prop="entry_donation_amount" label="捐款金额(元)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.entry_donation_amount" type="number" onblur="value = (value*1).toFixed(2)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="entry_early_stage" label="初创期(元)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.entry_early_stage" type="number" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="name" label="公益推广服务积分收益（服务体系）" align="center">
        <el-table-column prop="service_system_first_batch" label="首批(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.service_system_first_batch" type="number" oninput="value=parseInt(value>100?100:value)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="service_system_continue" label="持续（批发）(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.service_system_continue" type="number" oninput="value=parseInt(value>100?100:value)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="service_system_possession" label="属地(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.service_system_possession" type="number" oninput="value=parseInt(value>100?100:value)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="name" label=" 服务积分收益（购物分销）" align="center">
        <el-table-column prop="shopping_distribution_atl" label="线上(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.shopping_distribution_atl" oninput="valueparseInt(value>100?100:value)" type="number" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="shopping_distribution_possession" label="属地(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.shopping_distribution_possession" oninput="value=parseInt(value>100?100:value)" type="number" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="name" label=" 线下集采义卖收益" align="center">
        <el-table-column prop="sale_proceeds_proportion" label="比例(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.sale_proceeds_proportion" type="number" oninput="value=parseInt(value>100?100:value)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="sale_proceeds_gross_margin" label="毛利(%)" align="center">
          <template slot-scope="{row}">
            <el-input v-model="row.sale_proceeds_gross_margin" type="number" oninput="value=parseInt(value>100?100:value)" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <p class="tig">
      备注：<br>
      1、公益联盟服务驿站、公益联盟服务中心、公益联盟省级公司、公益联盟大区公司可冲抵本区域下级服务驿站的进货额或招商款项。<br>
      2、消费收益以实际现金消费额为准。<br>
      3、线下属地服务积分区域以收货地址为准。<br>
      4、享有推广公益创客在平台义购绿马创客专属礼包或捐款到公益基金，都可以获得30%的服务积分（会员除外）。
    </p>
    <div class="btnBox">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>

    <hr>
    <p>
      服务体系成员邀请会员成为创客，可以获取<el-input-number :precision="0" class="mlr10" v-model="service_points_ratio" @change="submitService" :min="0" :max="100" label="描述文字"></el-input-number>%的服务积分，其他按照首批执行分润
    </p>
    <hr>
    <p>
      创客直推的爱心小屋下的直推会员产生的订单金额的 <el-input-number :precision="0" class="mlr10" v-model="order_ratio" @change="submitOrder" :min="0" :max="100" label="描述文字"></el-input-number>%分给创客
    </p>
  </div>
</template>

<script>
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      tableData: [
        { lable: "公益会员", qualification: 0 },
        { lable: "公益创客", qualification: 1 },
        { lable: "公益联盟爱心小屋", qualification: 2 },
        { lable: "公益联盟服务驿站", qualification: 3 },
        { lable: "公益联盟服务中心", qualification: 4 },
        { lable: "市级", qualification: 5 },
        { lable: "公益联盟省级公司", qualification: 6 },
        { lable: "公益联盟大区公司", qualification: 7 }
      ],
      service_points_ratio: 0,
      order_ratio: 0,
      form: {
        type: 0,
        config: {
          list: []
        }
      },
      setTime: null
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    submit () {
      this.form = {
        type: 0,
        config: {
          list: this.tableData
        }
      }
      console.log(this.form)
      this.save()
    },
    submitService () {
      this.form = {
        type: 1,
        config: {
          service_points_ratio: this.service_points_ratio
        }
      }
      this.save()
    },
    submitOrder () {
      this.form = {
        type: 2,
        config: {
          order_ratio: this.order_ratio
        }
      }
      this.save()
    },
    save () {
      if (this.setTime) clearTimeout(this.setTime)
      this.setTime = setTimeout(() => {
        serviceApi.benefitConfigAdd(this.form).then(res => {
          if (res && res.data.code == 200) {
            this.$message.success('修改成功！')
            this.getDetails()
          }
        })
      }, 1000)
    },
    getDetails () {
      serviceApi.getByType().then(res => {
        if (res && res.data.code == 200) {
          res.data.list.forEach(v => {
            if (v.type == 0) this.tableData = v.config.list;
            else if (v.type == 1) this.service_points_ratio = v.config.service_points_ratio;
            else if (v.type == 2) this.order_ratio = v.config.order_ratio;
          })
        }
      })
    },
  }
}
</script>

<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style lang="scss" scoped>
/deep/ .el-table th {
  overflow: initial;
}
/deep/.el-table th > .cell {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
  color: #2e3444;
}

/deep/ .el-table thead tr:first-of-type th:first-of-type,
/deep/ .el-table thead tr:nth-of-type(2) th:first-of-type {
  border-bottom: none;
  padding: 0;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #ebeef5;
  display: block;
}
/deep/ .el-table thead tr:last-of-type th:first-of-type:before {
  height: 240px; //根据情况调整
  bottom: 0;
  right: 0; //根据情况调整
  transform: rotate(-60deg); //根据情况调整
  transform-origin: bottom;
}
/deep/ .el-table tbody tr td:first-of-type .cell {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 14px;
  color: #2e3444;
  font-weight: 600;
  text-align: center;
}
/deep/ .el-input--medium .el-input__inner {
  border: none;
  text-align: center;
}
.btnBox {
  margin-top: 20px;
  text-align: center;
}
.tig {
  color: #999;
}
.mlr10 {
  margin: 0 10px;
}
</style>